import { useMemo } from "react"
import { useComponentConfigStore } from "../../editor/stores/component-config"
import { MaterialItem } from "../../components/MaterialItem"
export function Material() {

    const { componentConfigs }  = useComponentConfigStore()  

    const components = useMemo(() => {
        return Object.values(componentConfigs)
    }, [componentConfigs])

    return (
        <div>
            {
                components.map((item, index) => {
                    return <MaterialItem name={item.name} desc={item.desc} key={item.name + index} />
                })
            }
        </div>
    )
}